let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");
let MiniCssExtractPlugin = require("mini-css-extract-plugin");
let OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
let TerserJSPlugin = require("terser-webpack-plugin");
let webpack = require("webpack");
module.exports = {
  optimization: {
    minimizer: [new OptimizeCssAssetsWebpackPlugin(), new TerserJSPlugin()],
  },
  // 开发服务器的配置
  // devServer: {
  //   port: 3000, // 端口号, 默认8080
  //   // progress: true, // 进度条
  //   // contentBase: "./build", // 代理静态资源路径
  //   client: {
  //     progress: true, // 进度条
  //   },
  //   static: {
  //     publicPath: "./build", // 代理静态资源路径
  //   },
  //   compress: true, // 开启gzip压缩(production)
  // },
  mode: "development", // 模式 默认两种 production development
  entry: "./src/index.js", // 入口
  output: {
    filename: "bundle.[hash].js", // 打包后的文件名(hash:8 添加8位hash值)
    path: path.resolve(__dirname, "build"), // 路径必须是一个绝对路径
  },
  // 数组 放着所有的webpack插件
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html", // 模板
      filename: "index.html", // 文件名
      minify: {
        removeAttributeQuotes: true, // 删除index.html中的双引号
        collapseWhitespace: true, // 压缩成一行
      },
      // hash: true, // index.html引入脚本添加hash参数
    }),
    new MiniCssExtractPlugin({
      filename: "css/main.css",
    }),
    // new webpack.ProvidePlugin({
    //   $: "jquery",
    // }),
  ],
  // externals: {
  //   jquery: "$", // jquery使用cdn方式引入, 忽略用imprort语法引入的
  // },
  // 模块
  module: {
    // 规则
    rules: [
      // {
      //   test: /\.html$/,
      //   use: "html-withimg-loader",
      // },
      {
        test: /\.(png|jpg|gif)$/,
        type: "javascript/auto",
        use: {
          loader: "url-loader",
          options: {
            limit: 200 * 1024, // 200kb以下打包成base64, 以上原文件
            outputPath: "img/",
            // publicPath: "http://www.xiaoxi.work",
            esModule: false,
          },
        },
      },
      // 全局拦截jquery, 动态暴露给全局
      {
        test: require.resolve("jquery"),
        loader: "expose-loader",
        options: {
          exposes: ["$", "jQuery"],
        },
      },
      // {
      //   test: /\.js$/,
      //   enforce: "pre", // 放到前面
      //   use: {
      //     loader: "eslint-loader",
      //   },
      // },
      {
        test: /\.js$/, // normal 普通的loader
        use: {
          // babel-loader 将ES6转ES5
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
            plugins: [
              // ["@babel/plugin-proposal-decorators", { legacy: true }],
              // ["@babel/plugin-proposal-class-properties", { loose: true }],
              "@babel/plugin-transform-runtime",
            ],
          },
        },
        include: path.resolve(__dirname, "src"),
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [
          // {
          //   loader: "style-loader",
          //   options: {
          //     // insert: () => "top",
          //     insert: function insertAtTop(element) {
          //       var parent = document.querySelector("head");
          //       // eslint-disable-next-line no-underscore-dangle
          //       var lastInsertedElement =
          //         window._lastElementInsertedByStyleLoader;

          //       if (!lastInsertedElement) {
          //         parent.insertBefore(element, parent.firstChild);
          //       } else if (lastInsertedElement.nextSibling) {
          //         parent.insertBefore(element, lastInsertedElement.nextSibling);
          //       } else {
          //         parent.appendChild(element);
          //       }

          //       // eslint-disable-next-line no-underscore-dangle
          //       window._lastElementInsertedByStyleLoader = element;
          //     },
          //   },
          // },
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
        ],
      },
      {
        test: /\.less$/,
        use: [
          // {
          //   loader: "style-loader",
          //   options: {
          //     //   insert: () => "top",
          //     insert: function insertAtTop(element) {
          //       var parent = document.querySelector("head");
          //       // eslint-disable-next-line no-underscore-dangle
          //       var lastInsertedElement =
          //         window._lastElementInsertedByStyleLoader;

          //       if (!lastInsertedElement) {
          //         parent.insertBefore(element, parent.firstChild);
          //       } else if (lastInsertedElement.nextSibling) {
          //         parent.insertBefore(element, lastInsertedElement.nextSibling);
          //       } else {
          //         parent.appendChild(element);
          //       }

          //       // eslint-disable-next-line no-underscore-dangle
          //       window._lastElementInsertedByStyleLoader = element;
          //     },
          //   },
          // },
          MiniCssExtractPlugin.loader,
          "css-loader",
          "less-loader",
          "postcss-loader",
        ],
      },
    ],
  },
};
